<template>
  <div class="tabmenu">
    <!-- 小写tabMenu -->
    <el-tabs v-model="tabsActiveName" @tab-click="handleClick">
      <el-tab-pane
          v-for="(item, index) in tabsMenuList"
          @click="handleMenuItemClick(item)"
          :key="index"
          :label="item.name"
          :name="item.path ? item.path : item.name"
        >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // mode为router时,以第一个path为默认激活,mode为menu时就以第一个name为默认激活,但一般都是menu模式,所以有path就选path,没就name
      // 会有问题如果在mode为menu时,传入带path的数据,就出问题了,人为约定不传这样的数据吧
      tabsActiveName: this.tabsMenuList[0].path ? this.tabsMenuList[0].path : this.tabsMenuList[0].name// 这样能默认第一个吗
      // tabsActiveName: ''
    }
  },
  props: {
    tabsMenuList: {
      /* [menuName1,menuName2] */
      /* 外部传参格式 [{path:'/xxx',name:'xxx'}] */
      type: Array,
      required: true
    },
    mode: {
      // mode控制模式,menu和router
      /* menu/router */
      type: String,
      default: 'menu'
    }
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler (val) {
        if (this.mode === 'router') {
          const path = this.tabsMenuList.findIndex((item) => item.path === val)
          this.tabsActiveName = this.tabsMenuList[path].path
        }
      }
    }
  },
  created () {
    // menu模式有个问题,刷新后标签是原来的,但是内容确实第一个的,这个没解决,我直接不管了
    // if (this.mode === 'menu') {
    //   const tabItem = window.sessionStorage.getItem('tabItem')
    //   const index = this.tabsMenuList.findIndex(item => item.name === tabItem)
    //   if (index !== -1) { // 这里不能if (index),因为index为-1时还是会执行,但为0时却不执行,这里就是findindex找到了反而不生效,没找到反而生效,只有为0 才不会执行
    //     this.tabsActiveName = this.tabsMenuList[index].name
    //   } else {
    //     this.tabsActiveName = this.tabsMenuList[0].name
    //   }
    // }
  },
  methods: {
    handleClick (tab) {
      // 触发父组件的事件,这里tab.index是字符串
      this.$emit('tabsChange', tab.index)
      // 这样总算能跳转了
      if (this.mode === 'router') {
        // 避免重复导航至同一路径
        if (this.$route.path !== tab.name) {
          this.$router.push(tab.name)
        }
      }
      // if (this.mode === 'menu') {
      //   window.sessionStorage.setItem('tabItem', this.tabsActiveName)
      // }
    }
    // handleMenuItemClick (item) {
    //   // 这个为啥不生效呢,点了没反应,-----原因好像是因为在el-tab-pane加是没反应的,不过这是结论,暂不知道原因
    //   console.log(item)
    //   if (this.mode === 'router') {
    //     if (this.$route.path !== item.path) {
    //       this.$router.push(item.path)
    //     }
    //   }
    // }
  }
}
</script>

<style lang="less">
</style>
